<template>
  <div>
    <my-menus :data="data1" defaultActive="2"></my-menus>
    <!--<infinite-menu :data="data2"></infinite-menu>-->
    <infinite-menu :data="data2" defaultActive="2" name="name" index="index" icon="icon" children="children"></infinite-menu>
  </div>
</template>

<script lang='ts' setup>
let data1 = [
  {
    name: '导航一',
    index: '1',
    icon: 'document'
  },
  {
    name: '导航二',
    index: '2',
    icon: 'document'
  },
  {
    name: '导航三',
    index: '3',
    icon: 'document',
    children: [
      {
        name: '导航一',
        index: '3.1',
        icon: 'document'
      },
      {
        name: '导航二',
        index: '3.2',
        icon: 'document'
      }
    ]
  },
]
let data2 = [
  {
    name: '导航一',
    index: '1',
    icon: 'document'
  },
  {
    name: '导航二',
    index: '2',
    icon: 'document'
  },
  {
    name: '导航三',
    index: '3',
    icon: 'document',
    children: [
      {
        name: '导航一',
        index: '3.1',
        icon: 'document'
      },
      {
        name: '导航二',
        index: '3.2',
        icon: 'document',
        children: [
          {
            name: '导航3.2.1',
            index: '3.2.1',
            icon: 'document'
          },
          {
            name: '导航3.2.2',
            index: '3.2.2',
            icon: 'document',
            children: [
              {
                name: '导航3.2.2.1',
                index: '3.2.2.1',
                icon: 'document'
              },
              {
                name: '导航3.2.2.2',
                index: '3.2.2.2',
                icon: 'document',
              }
            ]
          }
        ]
      }
    ]
  },
]
</script>

<style lang='scss' scoped>
</style>
